<template>
    <div>
        about-
        <router-link :to="{name:'about',query:{id:100}}">{{title}}</router-link>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                title: "关于页面"
            }
        },
        // 组件的守卫
        beforeRouteEnter(to,from){
            console.log('beforeRouteEnter');
            // new Promise(resolve => {
            //     setTimeout(() => {
            //         next(vm => vm.title = 'about页面')
            //     },1000)
            // })
        },
        // 路由的更新
        beforeRouteUpdate(to,from){
            console.log('beforeRouteUpdate');
        },
        beforeRouteLeave(to,from,next){
            console.log('beforeRouteLeave');
            if(confirm('确定真的要离开吗？')) next()
        }
    }
</script>

<style lang="scss" scoped>

</style>